<template>
  <div class="app">
    <div class="approver">
      <el-steps
        style="margin-left: -60px"
        :active="1"
        align-center
        :space="200"
      >
        <el-step title="第一步审批" description="admin"></el-step>
        <el-step title="第二步审批" :description="descriptionName"></el-step>
      </el-steps>
      <div class="addbtn" id="addb" style="visibility: visible;">
        <el-button
          class="btn"
          type="primary"
          icon="el-icon-plus"
          @click="dialogTableVisible = true"
          style="padding: 12px; margin-left: 175px"
        >
          <font style="color: white"><span class="s1">添加审批人员</span></font>
        </el-button>
      </div>
      <div id="updatebtn" style="visibility: hidden;">
        <el-button
          id="btns"  
          type="primary"
          icon="el-icon-plus"
          @click="dialogTableVisible = true"
          style="padding: 12px; margin-left: 175px"
          plain
        >
          <font style="color: white"><span class="s1">修改审批人员</span></font>
        </el-button>
      </div>
    </div>

    <div class="模态框">
      <el-dialog title="添加审批人员" :visible.sync="dialogTableVisible">
        <el-form
          style="margin-left: 150px; margin-top: -40px; position: absolute"
          :inline="true"
          :model="userInfo"
          class="demo-form-inline"
          ref="userInfo"
        >
          <el-form-item prop="userInfo">
            <el-input
              class="tab"

              size="medium"
              placeholder="请输入人员姓名"
              v-model="userInfo.username"
              clearable
            ></el-input>
          </el-form-item>
          <el-button
            style="margin-left: 10px; margin-top: 3px"
            type="primary"
            size="medium"
            @click="submitSearch()"
            ><span class="s2">查询</span>
          </el-button>
        </el-form>
        <el-table :data="gridData">
          <el-table-column property="id" label="Id" width="150">
            <template slot-scope="scope">
              {{ scope.row.id }}
            </template>
          </el-table-column>

          <el-table-column property="name" label="姓名" width="150">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>

          <el-table-column property="username" label="用户名" width="150">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>

          <el-table-column property="departmentName" label="所属部门">
            <template slot-scope="scope">
              {{ scope.row.departmentName }}
            </template>
          </el-table-column>
          <el-table-column property="" label="操作" v-slot="scope">
            
            <el-button
              id="save"
              style="background-color: #343961; border: 0px"
              type="success"
              icon="el-icon-plus"
              @click="
                addApply(scope.row.id, scope.row.username, scope.row.name)
              "
              :disabled = "scope.row.id != 1?false:true" 
              circle
            ></el-button>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="UserQueryDto.page"
          :page-size="UserQueryDto.limit"
          :total="UserQueryDto.total"
          layout="->,prev, pager, next, jumper, total"
        >
        </el-pagination>
        <!-- <span class="sp">已选中：</span> -->
        <div id="textArea"></div>
        <el-button class="save" @click="submitApply" type="primary"
          >返回</el-button
        >
      </el-dialog>
    </div>
  </div>
</template>
  
<script>
import infras from "@/serive/Infrastructure";
export default {
  props: ["state"],
  data() {
    return {
      descriptionName: "",
      
      applyUser: {
        id: "",
        username: "",
        number: "",
      },

      userInfo: {
        username: "",
      },

      gridData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      input: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },

      UserQueryDto: {
        name: "",
        page: 1,
        limit: 6,
        total: 0,
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    submitSearch() {
      console.log("查询");
      console.log(this.userInfo);
      infras.findUserName(this.userInfo).then((res) => {
        this.gridData = res.data.data;
        this.userInfo.total = res.data.count;
      });
    },

    //添加审批人
    addApply(id, username, name) {
      this.applyUser.username = username;
      this.applyUser.id = id;
      this.descriptionName = name;
      this.applyUser.number = this.state
      let arr =[1]
      arr.push(id)
      console.log(arr);
      console.log(this.state);
      console.log(this.applyUser);

      infras.applyPerson(arr,this.state).then((_) => {
        this.$message({
          type: "success",
          message: "添加成功",
        });

        //
        var btns = document.getElementById("updatebtn");
        btns.style.visibility = 'visible'
        console.log(btns.style.visibility)
       
      });
    },

    handleCurrentChange(page) {
      this.UserQueryDto.page = page;
      this.findUserList();
    },

    //保存按钮
    submitApply() {
      this.dialogTableVisible = false;
    },

    //数据显示函数
    findUserList() {
      infras.queryAll(this.UserQueryDto).then((res) => {
        this.gridData = res.data.data;
        this.UserQueryDto.total = res.data.count;
        // console.log(this.userList);
      });
    },
  },

  created() {
  
    this.findUserList();
  },
};
</script>
  
<style>
.approver {
  /* border: 1px solid rgb(0, 0, 255); */
  margin-top: 20px;
}

.btn {
  margin-left: 230px;
  border: 0;
  position: absolute;
  background-color: #f19372 !important;
}

#btns{
  margin-left: 230px;
  border: 0;
  position: relative;
  /* visibility: hidden; */
  background-color: #f19372 !important;
}



.tab {
  width: 200px;

  margin-left: -150px;
}

#textArea {
  margin-top: 40px;
  /* border: 1px solid #DBDBDB; */
  width: 100%;
  height: 50px;
}

.sp {
  position: absolute;
  margin-left: 5px;
  margin-top: 10px;
  font-size: 1.2em;
  color: #343961;
}

#s1 {
  border: 1px solid #f19372;
  display: block;
  float: left;
  text-align: center;
  line-height: 35px;
  width: 100px;
  height: 35px;
  margin-left: 5px;
  color: #f19372;
  font-size: 16px;
  /* position: absolute; */
}

#s3 {
  /* border: 1px solid #F19372; */
  margin-left: 15px;
  position: absolute;
  cursor: pointer;
  margin-top: -10px;
  color: #a5a5a5;
}

.save {
  margin: 0 50%;
}
</style>